<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
import ProductList from '@/pages/maintenance/components/product-list.vue'
import { useSafeAreaInsets } from '@/mixins/basic'
import { getHomeData, Banner } from '@/api/home'
import UserQrcode from '@/pages/components/user-qrcode'
import { useUserStore } from '@/store/user'

defineOptions({
  name: 'Home',
  options: {
    styleIsolation: 'shared',
  },
})

const { safeAreaInsets } = useSafeAreaInsets()
const userStore = useUserStore()

const swiperList = ref<Banner[]>([])
onLoad(() => {
	initData()
})
async function initData() {
	// 获取banner数据
	const { banner = [] } = await getHomeData({
		recommend: 1
	})
	const prefix = import.meta.env.VITE_IMG_URL_PREFIX
	swiperList.value = banner.map((item: Banner) => {
		return {
			...item,
			url: prefix + item.image
			// url: 'http://124.222.94.5:8000/storage/default/20250812/%E4%B8%8B%E8%BD%BDfe591b75e0e8a9fbec3dba77963dba84b8c0c918.jpeg'
		}
	})
}
// 轮播图点击
function handleClick({ item }) {
	if (!item.redirect_url) return
	uni.navigateTo({
		url: `/pages-sub/web-view/web-view?url=${item.redirect_url}`
	})
}

function handleStore() {
	uni.navigateTo({
		url: '/pages-sub/store/store'
	})
}

// function handleTest() {
// 	uni.navigateTo({
// 		url: '/pages/maintenance/details/details',
// 		success: (res) => {
// 			uni.$emit('details', {
// 				id: 1,
// 				banner: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
// 				home_name: '服务',
// 				price: 120
// 			})
// 		}
// 	})
// }
</script>

<template>
	<view class="home-page" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
		<view class="page-title">
			<view class="title">HAPPY</view>
			<view class="sub-title">雪具保养中心</view>
		</view>
		<wd-swiper :list="swiperList" value-key="url" height='300' autoplay class="swiper-box" @click="handleClick">
		  <template #indicator="{ current, total }">
			  <view class="dots-box">
					<view v-for="(item, index) in total" :key="item" :class="['dot-item', { 'active-dot': current === index }]"></view>
			  </view>
		  </template>
		</wd-swiper>
		
		<view class="btn-store" @click="handleStore">查找线下店铺</view>
		<!-- <wd-button @click="handleTest">Test</wd-button> -->
		
		<view v-if="userStore.userInfo.token" class="fab-fixed">
			<!-- 用户二维码 -->
			<UserQrcode />
		</view>
		
		<!-- 商品列表 -->
		<view class="product-box">
			<!-- <h1 class="title">商品列表</h1> -->
			
			<product-list recommend="1"></product-list>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.home-page {
		background-color: #FCFEFF;
		padding: 0 26px 26px 26px;
		.page-title {
			color: $uni-main-color;
			padding-bottom: 18px;
			font-weight: 600;
			.title {
				font-size: 36px;
				line-height: 34px;
				font-family: Source Han Sans CN;
			}
			.sub-title {
				font-size: 14px;
				line-height: 17px;
				letter-spacing: 6px;
				font-family: Source Han Sans CN;
			}
		}
		:deep(.wd-swiper) {
			border-radius: 12px;
			box-shadow: 0px 16px 20px 0px rgba(214, 228, 250, 0.8);
			background: rgba(196, 196, 196, 1);
		}
		:deep(.wd-swiper__track) {
			border-radius: 12px;
		}
		.dots-box {
			display: flex;
			justify-content: center;
			position: absolute;
			width: 100%;
			bottom: -13px;
			
			.dot-item {
				width: 4px;
				height: 4px;
				background-color: #000;
				border-radius: 50%;
				
				& + .dot-item {
					margin-left: 4px;
				}
				&.active-dot {
					width: 16px;
					border-radius: 50px;
				}
			}
		}
		
		.btn-store {
			margin-top: 32px;
			height: 40px;
			border-radius: 12px;
			background-color: $uni-main-color;
			color: #fff;
			font-size: 15px;
			font-weight: 600;
			line-height: 40px;
			text-align: center;
			&:active {
				background-color: rgba($uni-main-color, 0.9)
			}
		}
		
		.product-box {
			padding-top: 28px;
			> .title {
				color: #23282C;
				font-family: Nunito;
				font-size: 20px;
				line-height: 20px;
				padding-bottom: 18px;
			}
		}
		.fab-fixed {
			bottom: 20px;
			
			:deep(.user-qrcode) {
				width: 65px;
				height: 40px;
				
				.qrcode-box {
					position: relative;
					display: block;
					width: auto;
					height: auto;
					border-radius: 0;
					background-color: transparent;
					box-shadow: none;
					.qrcode {
						width: 20px;
						height: 20px;
					}
				}
			}
		}
	}
</style>
